<template>
  <div class="zk-file-review">
    <div class="file-review-body">
      <el-image
        v-if="FILE_TYPE.IMAGE === type"
        :src="url"
        style="width: 100%; height: auto"
        fit="fit"
      />
      <video
        v-if="FILE_TYPE.VIDEO === type"
        :src="url"
        style="width: 100%; height: 500px; margin: auto"
        controls
      ></video>
      <pdf-review
        v-if="FILE_TYPE.PDF === type"
        :url="url"
      />
    </div>
  </div>
</template>
<script>
  import { FILE_TYPE } from '../../common/constants'
  import PdfReview from './pdf-review'

  export default {
    name: 'FileReview',
    components: { PdfReview },
    props: {
      type: {
        type: String,
        default: FILE_TYPE.OTHER
      },
      url: {
        type: String,
        default: '/'
      }
    },
    data() {
      return {
        FILE_TYPE,
      }
    },
  }
</script>
<style scoped lang="scss">
  .zk-file-review {
    padding: 50px 10px 40px;
    .file-review-body {
      height: 100%;
      min-height: 500px;
      video {
        margin: auto;
      }
    }
  }
</style>
